import { t } from 'i18next'
import { Modal, Trigger, TriggerInstance } from '@kedacom/react-next'
import { FileIcon, WrapBody, WrapBG } from '../style'
import Icon from '@/components/Icon'
import shallow from 'zustand/shallow'
import { useStore as useMeetingScheduleStore } from '../../store'
import { useEffect, useRef, useState } from 'react'
import { Utils } from '../utils'
import { Avatar } from '@/components/Avatar'

import { MeetingCardProps, MeetingEntity } from '../../interface'
/*
export type DocsRef = {
	getFileNumber: () => number
}
*/
import Docs, { DocsRef } from './docs'
import { fetchGetPlatformServiceUrl, fetchSetCookie } from '@/api/global'
import { MEETING_JUMP_URL } from '@/utils/constant'
import { useGlobalStore } from '@/store/global'
import PopupUserWin from '@/pages/index/ManageList/MeetingCard/PopupUserWin'
import { getMeetingTime } from '@/utils'
import Alert from '@/components/Alert'

/*
export interface MeetingCardProps {
	className?: string
	entity: MeetingEntity
	orderArr: [number, number]
}

组件的使用
<CommonCard
	entity={props.entity}
	orderArr={props.orderArr}
	is_show_share={true}
	is_show_vcs={false}
	is_show_edit={!!props.entity.is_edit}
	is_show_e164={!!props.entity.video}
	is_show_domain_name={false}
	is_upload_file={true}
	file_num={props.entity.file_num ?? 0}
></CommonCard>

*/
export function CommonCard(
	props: MeetingCardProps & {
		is_show_share: boolean
		is_show_vcs: boolean
		is_show_edit: boolean
		is_show_e164: boolean
		is_show_domain_name: boolean
		/**是否是文件上传 */
		is_upload_file: boolean
		file_num: number
		is_conflict_modal?: boolean
	}
) {
	const { user, SWITCH } = useGlobalStore((state) => ({ user: state.user, SWITCH: state.SWITCH }), shallow)

	const [file_num, setFileNum] = useState(props.file_num)
	const DocsRef = useRef<DocsRef | null>(null)
	const refDetail = useRef<TriggerInstance>(null)
	const [docs_open, setDocsOpen] = useState(false)
	/**进入会议空间 */
	const handleIntoMeetingSpace = async (_meeting: MeetingEntity) => {
		const user = useGlobalStore.getState().user
		if (!user?.enable_meeting) {
			Alert(t('无会议管理权限，请通知管理员'))
			return false
		}
		if (props.is_upload_file) {
			setDocsOpen(true)
		} else {
			if (_meeting.video === 0 /**非视频会议 会判断后跳转，因为非视频会议的文件存储在核心 */) {
				const preUrl = await fetchGetPlatformServiceUrl()
				fetchSetCookie({ meeting_moid: props.entity.meeting_id, type: 1 }, function () {
					window.open(preUrl + `/meeting/meetingSpace/${props.entity.meeting_id}`)
				})
			} else {
				fetchSetCookie({ meeting_moid: props.entity.meeting_id, type: 1 }, function () {
					window.open(MEETING_JUMP_URL + `/meeting/meetingSpace/${props.entity.meeting_id}`)
				})
			}
		}
	}
	const getFileUploadReactDom = () => {
		if (props.entity.state === 2 && !!SWITCH.meetingSpace) {
			return (
				<div className="meeting-card-body-line meeting-card-meetingspace">
					<span style={{ paddingRight: '4px' }}>{t('会议空间')}</span>
					<FileIcon
						onClick={() => {
							handleIntoMeetingSpace(props.entity)
						}}
						title={t('会议空间')}
					>
						<Icon></Icon>
					</FileIcon>
				</div>
			)
		} else {
			if (user?.enable_upload && !!SWITCH.fileManager) {
				return (
					<div className="meeting-card-body-line meeting-card-meetingspace">
						<span>{t('已上传{{num}}个文档', { num: file_num })}</span>
						<FileIcon
							onClick={() => {
								handleIntoMeetingSpace(props.entity)
							}}
							title={t('文件管理')}
						>
							<Icon></Icon>
						</FileIcon>
					</div>
				)
			}
		}
		return <></>
	}
	const {
		getMeetingE164,
		getOrganigerInfo,
		getAttendingPersonNum,
		getTitle,
		getRightTopMeetingIcon,
		getWrapBgClassName,
		getMeetingTimeContent,
		getMeetingRooms,
		getDomainName,
		update,
		changeFileInfo,
	} = useMeetingScheduleStore(
		(state) => ({
			update: state.update,
			getTitle: state.getTitle,
			getMeetingE164: state.getMeetingE164,
			getOrganigerInfo: state.getOrganigerInfo,
			getAttendingPersonNum: state.getAttendingPersonNum,
			getRightTopMeetingIcon: state.getRightTopMeetingIcon,
			getWrapBgClassName: state.getWrapBgClassName,
			getMeetingTimeContent: state.getMeetingTimeContent,
			getMeetingRooms: state.getMeetingRooms,
			getDomainName: state.getDomainName,
			changeFileInfo: state.changeFileInfo,
		}),
		shallow
	)
	useEffect(() => {
		if (changeFileInfo.conf_id == '') {
			return
		}
		if (changeFileInfo.conf_id === props.entity.conf_id) {
			setFileNum(changeFileInfo.file_num ?? 0)
		}
	}, [changeFileInfo])

	return (
		<>
			<WrapBG className={getWrapBgClassName(props.entity)}></WrapBG>
			<WrapBody>
				<div className="main-left">
					{/* 会议标题 */}
					<div className="meeting-card-body-line meeting-card-meeting-name-info">
						{getTitle({
							_meeting: props.entity,
							is_show_share: props.is_show_share,
							is_show_vcs: props.is_show_vcs,
							is_show_edit: props.is_show_edit,
						})}
					</div>
					{/* 会议号码 预约的会议需要加入判断*/}
					{props.is_show_e164 && (
						<div className="meeting-card-body-line meeting-card-meeting-num-info">
							{getMeetingE164(props.entity, true)}
						</div>
					)}
					{/* 会议结束时间内容 */}
					<div className="meeting-card-body-line meeting-card-date-time-info">
						{getMeetingTimeContent(props.entity, props.is_conflict_modal)}
					</div>
					{/* 会议室信息 */}
					{getMeetingRooms(props.entity, refDetail)}
					{/* 创会者信息 */}
					<div className="meeting-card-body-line meeting-card-meeting-creator-info">
						{getOrganigerInfo(props.entity)}
					</div>
					{/* 用户域信息 只在正在召开会议当中存在*/}
					{props.is_show_domain_name && getDomainName(props.entity, user)}
					{getFileUploadReactDom()}
				</div>
				<div className="fixed-right">
					{/* 右上角图标 */}
					<div className="fixed-right-line quantumEncryption-line">
						{getRightTopMeetingIcon(props.entity)}
					</div>
					{/* 参会人数*/}
					<>{getAttendingPersonNum(props.entity)}</>
					{/* 参会人的图标 */}
					<div className="fixed-right-line">
						<div className="fixed-right-line">
							{[...props.entity.members]
								.reverse()
								.splice(0, 3)
								.map((mt, index) => {
									let _user = {
										moid: mt.account ?? '',
										accountType: mt.account_type ?? '',
										name: mt.name ?? '',
										portrait32: mt.portrait ?? '',
										portrait:
											mt.portrait && mt.portrait.length > 0
												? mt.portrait
												: Utils.onErrorBySize(mt.account_type, 32),
									}
									return mt.account && mt.account.length > 0 && !!SWITCH.userPopUp ? (
										<Trigger
											key={index}
											trigger="hover"
											preventOverflow
											popup={<PopupUserWin moid={mt.account} key={index}></PopupUserWin>}
											/*
											orderArr={[index, beBegin_held_list.length]}  
											传递进来的数据
											一行两个card数据
											*/
											popupAlign={{
												points:
													props.orderArr[0] <= 1
														? props.orderArr[0] % 2 === 0
															? ['bl', 'tl']
															: ['br', 'tr']
														: props.orderArr[0] % 2 === 0
														? ['tl', 'bl']
														: ['tr', 'br'],
												offset:
													props.orderArr[0] <= 1
														? props.orderArr[0] % 2 === 0
															? [10, -20]
															: [-10, -20]
														: props.orderArr[0] % 2 === 0
														? [10, -5]
														: [-10, -5],
											}}
										>
											<div className="mt-each" key={index}>
												<div className="mt-each-header">
													<Avatar value={_user}></Avatar>
												</div>
												<div className="mt-each-name">{mt.name}</div>
											</div>
										</Trigger>
									) : (
										<div className="mt-each" key={index}>
											<div className="mt-each-header">
												<Avatar value={_user}></Avatar>
											</div>
											<div className="mt-each-name">{mt.name}</div>
										</div>
									)
								})}
						</div>
					</div>
				</div>
			</WrapBody>
			<Modal
				title={t('会议文档')}
				open={docs_open}
				width={848}
				height={508}
				okText={false}
				cancelText={false}
				footer={<></>}
				onCancel={() => {
					setDocsOpen(false)
					let number = DocsRef.current?.getFileNumber()
					update({ changeFileInfo: { conf_id: props.entity.conf_id, file_num: number ?? 0 } })
				}}
			>
				<Docs
					ref={DocsRef}
					meetingInfo={{
						meetingMoid: props.entity.meeting_id,
						name: props.entity.name,
						e164: props.entity.conf_id,
						dateTime: getMeetingTime(
							props.entity.start_time,
							props.entity.duration,
							props.entity.duration === 0
						),
					}}
				/>
			</Modal>
		</>
	)
}
